<script>
function delete_article(id, title, url)
{
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		jQuery( "#dialog:ui-dialog" ).dialog( "destroy" );
		jQuery( "#dialog-title" ).html(title);	
		jQuery( "#dialog-modal" ).dialog({
			resizable: false,
			height:140,
			modal: true,			
			buttons: {
				"Yes": function() {
										      jQuery("#article-list").html('<div id="cover"></div><div class="loading"><%= image_tag "loading_ajax.gif" %></div>'+jQuery("#article-list").html());
						                                      jQuery("#cover").css("position", "absolute");
										      //alert("dsf");
										      //alert(jQuery("#cover").css("top"));
										      jQuery(".loading img").css("z-index", 200);
										      jQuery(".loading img").css("margin-top", (jQuery(".style1").height()+5)/2);
										      jQuery("#cover").css("top", jQuery(".style1").offset().top );
										      jQuery("#cover").css("left", jQuery(".style1").offset().left );
										      jQuery("#cover").css("z-index", 100 );
										      jQuery("#cover").css("width", jQuery(".style1").width()+5 );
										      jQuery("#cover").css("height", jQuery(".style1").height()+5 );
					$( this ).dialog( "close" );
					jQuery.ajax({
					  url: url,
					  type: 'DELETE',
					  data: 'format=js',
					  success: function (data){
					    jQuery.ajax({
					      url: "<%= url_for(:controller => 'events', :action => 'show', :format => 'js') %>",
					      data: "page=<%= @page %>"
					    });
					  }
					});
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}

		});
}
</script>

<div class="dataTables_wrapper">
						    <% if !@articles.empty? %>
                                                    <div id="article-list">
						    <div id="table-content">
						    
						      <table class="style1">

							<thead>
								<tr>
									<th><input type="checkbox" class="checkbox select-all" /></th>
									<th width="25%">Title</th>
                                                                        <th>Ordering</th>
									<th width="10%"  class="column_center">Controls</th>
									<th class="column_center">Published</th>
								</tr>
							</thead>
							
							<tbody>
                                                          <% @articles.each do |article| %>                                                            
                                                                <tr>
									<td><input type="checkbox" class="checkbox" /></td>
									<td><a href="#"><%= link_to article.title, article %></a></td>
									<td><%= article.ordering %></td>
									<td align="center">
                                                                          <%= link_to image_tag("ico_edit_16.png", :border=>0, :class => 'icon16 fl-space2', :title => 'Edit'), edit_article_path(article) %>
                                                                          <span class="delete">
									    <%= image_tag("ico_delete_16.png",
						                                          :border=>0,
											  :class => 'icon16 fl-space2',
											  :title => 'Delete',
											  :onClick => "delete_article(#{article.id}, '#{article.title}', '#{url_for(article)}');",
											  :style => "cursor:pointer") %>
									  </span>
									</td>
									<td align="center">
									  <span id="published_<%= article.id %>" class="published">
									    <%=
									      if article.published
										link_to image_tag("published_on.png", :border=>0, :class => 'icon16 fl-space2', :title => 'Yes'),										      
											    { :controller => "articles", :id => article.id,										      
											    :action => "published", :format => "js"},
											    :remote => true
									      else
										link_to image_tag("published_off.png", :border=>0, :class => 'icon16 fl-space2', :title => 'No'),										      
											    { :controller => "articles", :id => article.id,										      
											    :action => "published", :format => "js"},
											    :remote => true
									      end
									    %>
									  </span>									  
									</td>
								</tr>
                                                          <% end %>
                                                          </tbody>
						      </table>
						    </div>
						    </div>
                                                    
						    <div class="dataTables_paginate paging_full_numbers">
						      <%= will_paginate(@articles, :renderer => "PaginationListLinkRenderer") %>
						    </div>
                                                        <script type="text/javascript">
        
                                                          jQuery(document).ready(function() {
                                                            jQuery('.pagination a').attr('data-remote', 'true');
                                                            jQuery('.pagination a').attr('update', 'dd');
							    jQuery('.pagination a').click(function() {
						                                      jQuery("#article-list").html('<div id="cover"></div><div class="loading"><%= image_tag "loading_ajax.gif" %></div>'+jQuery("#article-list").html());
						                                      jQuery("#cover").css("position", "absolute");
										      //alert("dsf");
										      //alert(jQuery("#cover").css("top"));
										      jQuery(".loading img").css("z-index", 200);
										      jQuery(".loading img").css("margin-top", (jQuery(".style1").height()+5)/2);
										      jQuery("#cover").css("top", jQuery(".style1").offset().top );
										      jQuery("#cover").css("left", jQuery(".style1").offset().left );
										      jQuery("#cover").css("z-index", 100 );
										      jQuery("#cover").css("width", jQuery(".style1").width()+5 );
										      jQuery("#cover").css("height", jQuery(".style1").height()+5 );
										    });
                                                            jQuery('#articles .checkbox.select-all').click(function() {
										      //alert(jQuery('#articles .checkbox.select-all').is(':checked'));
										      jQuery("#articles .checkbox").attr("checked", jQuery('#articles .checkbox.select-all').is(':checked'));										      
										    });
										    
						             jQuery('.published').click(function() {
										      //alert(jQuery('#articles .checkbox.select-all').is(':checked'));
										      //jQuery('.published').html('<div class="loading"><%= image_tag "loading_ajax.gif" %></div>');
										      this.innerHTML = '<div class="published_loading"><%= image_tag "published_ajax.gif" %></div>';
										    });
										    
										    
										    
                                                          });
        
                                                        </script>
						      
						

<% else %>

<p>There is no article for this event ... </p>

<% end %>

</div>